{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="{% static 'jquery.min.js' %}"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
    <button id="btn">点我</button>
</p>
<script>
    $('#btn').click(function() {
        $.ajax({
            url: '/ab_ajax/',
            type: 'post',
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            dataType: 'json',  // 会自动反序列化
            success: function(args) {
                console.log(typeof args);  // string
                $('#d3').val(args.msg);
            },

        });
    })
</script>
</body>
</html>